import React, { useEffect, useState } from 'react'
import axios from 'axios';

export default function ToutiaoCom() {
  //状态
  let [news, setNews] = useState<News[]>([]);
  //声明一个接口
  interface News{
    Title: string;
  }

  interface Body{
    data: News[],
  }

  useEffect(() => {
    let getData = async () => {
      //声明 url 的变量
      let url = '/toutiao/hot-event/hot-board/?origin=toutiao_pc&_signature=_02B4Z6wo00f01j2wauQAAIDCvbKQpB6MEho9lG5AAOsZcUjxuoEArIF6pi61mlufF4bLe0RtmKGPkccv.dbqqdsTR7Zjyy757uEqh6SMhfdOhC0lESB3OUPw6iNFqZty1Y9tMBERgkUVmGIV8a'
      //发送 AJAX 请求
      let result = await axios.get<Body>(url);
      //更新状态
      setNews(result.data.data);
    }

    getData();

  }, [])

  return (
    <div>
      <h2>头条新闻</h2>
      <hr />
      <ul>
        {
          news.map((item, index) => {
            return <li key={index}>{item.Title}</li>
          })
        }
      </ul>
    </div>
  )
}
